<template>
    <div class="deviceType">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">库存动态</span>
        </div>
        <div class="content">
            <div class="statistics">
                <!-- <div class="statistics_title">
                    <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                    <span>任务完成率</span>
                </div> -->
                <div class="dateSearch">
                    <span class="date_item" :class="{ 'date_item_active': dateIndex == 0 }" @click="changIndex(0)">近30日</span>
                    <span class="date_item" :class="{ 'date_item_active': dateIndex == 1 }" @click="changIndex(1)">近3个月</span>
                    <span class="date_item" :class="{ 'date_item_active': dateIndex == 2 }" @click="changIndex(2)">近1年</span>
                </div>
                <lineChart2 :data="chartData"></lineChart2>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import lineChart2 from './lineChart2.vue';

let dateIndex = ref(0);//选中的时间范围下标

const changIndex = (index: number) => {
    if (dateIndex.value != index) {
        dateIndex.value = index;
    }
}
const chartData = reactive({
    data: [
        { value: '265', name: '未接受' },
        { value: "105", name: '处理中' },
        { value: "100", name: '已完成' },
        { value: "100", name: '已关闭' },
        { value: "49", name: '未分配' },
    ],
    data2: [
        { date: '2', value: 50 },
        { date: '4', value: 210 },
        { date: '6', value: 200 },
        { date: '8', value: 150 },
        { date: '10', value: 130 },
        { date: '12', value: 160 },
        { date: '14', value: 100 },
        { date: '16', value: 120 },
        { date: '18', value: 130 },
        { date: '20', value: 110 },
        { date: '22', value: 120 },
        { date: '24', value: 30 },
        { date: '26', value: 35 },
        { date: '28', value: 60 },
        { date: '30', value: 90 },
    ] as any,
    data3: [
        { date: '2', value: 70 },
        { date: '4', value: 230 },
        { date: '6', value: 280 },
        { date: '8', value: 110 },
        { date: '10', value: 230 },
        { date: '12', value: 150 },
        { date: '14', value: 190 },
        { date: '16', value: 110 },
        { date: '18', value: 100 },
        { date: '20', value: 210 },
        { date: '22', value: 320 },
        { date: '24', value: 230 },
        { date: '26', value: 135 },
        { date: '28', value: 160 },
        { date: '30', value: 190 },
    ] as any,
    data4: [
        { date: '2', value: 50 },
        { date: '4', value: 130 },
        { date: '6', value: 170 },
        { date: '8', value: 60 },
        { date: '10', value: 190 },
        { date: '12', value: 130 },
        { date: '14', value: 120 },
        { date: '16', value: 130 },
        { date: '18', value: 150 },
        { date: '20', value: 210 },
        { date: '22', value: 220 },
        { date: '24', value: 200 },
        { date: '26', value: 105 },
        { date: '28', value: 120 },
        { date: '30', value: 150 },
    ] as any,
})
</script>

<style lang="scss" scoped>
.deviceType {
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 999;
    padding-left: vh(28);
    padding-right: vh(28);
    background: url(@/assets/images/dailyMaintenance/l-bg-01.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(61);
    width: vw(422);
    height: vh(283);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .content {
        margin-top: vh(30);

        .statistics {
            .dateSearch {
                position: absolute;
                top: vh(34);
                right: vh(15);
                z-index: 9999;

                .date_item {
                    padding: 0 vh(9);
                    display: inline-block;
                    background: rgba(11, 122, 155, 0.5);
                    border-radius: 3px;
                    line-height: vh(18);
                    margin-left: vh(10);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(11);
                    color: #FFFFFF;
                    border: none;
                    cursor: pointer;

                    &.date_item_active {
                        border: 1px solid #00BDE5;
                    }
                }
            }

            .inspected {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #00B1CD;
                margin-top: vh(14);
            }
        }
    }
}
</style>